
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
	<title>YUI Library Examples: Overlay: IO Plugin</title>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    	<link rel="stylesheet" type="text/css" href="../../assets/yui.css" >

<style>
    /*Supplemental CSS for the YUI distribution*/
    #custom-doc { width: 95%; min-width: 950px; }
    #pagetitle {background-image: url(../../assets/bg_hd.gif);}
/*    #pagetitle h1 {background-image: url(../../assets/title_h_bg.gif);}*/
</style>

<link rel="stylesheet" type="text/css" href="../../assets/dpSyntaxHighlighter.css">
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<style type="text/css">
    .yui3-overlay-content {
        padding:5px;
        background-color:#ccc;
        border:1px solid #000;
    }

    .yui3-overlay .yui3-widget-hd, 
    .yui3-overlay .yui3-widget-bd, 
    .yui3-overlay .yui3-widget-ft {
        background-color:#eee;
        padding:2px;
        border:1px solid #999;
        text-align:left;
    }

    .yui3-overlay .yui3-widget-bd {
        background-color:#fff;
        text-align:center;
        vertical-align:middle;
    }

    .yui3-overlay .yui3-widget-bd .yui3-feed-data {
        text-align:left;
    }

    .yui3-overlay .yui3-feed-selector .yui3-prompt {
        font-weight:bold;
    }

    .yui3-widget-loading .yui3-widget-bd {
        background: #fff url(http://developer.yahoo.com/yui/3/examples/overlay/assets/img/ajax-loader.gif) no-repeat center center;
        height:40px;
    }

</style>

</head>
<body id="yahoo-com" class="yui3-skin-sam  yui-skin-sam">
<div id="custom-doc" class="yui-t2">
<div id="hd">
	<div id="ygunav">
		<p>
            <em>
                <a href="http://developer.yahoo.com/yui/3/">YUI 3.x Home</a> <i> - </i>	
            </em>
		</p>
		<form action="http://search.yahoo.com/search" id="sitesearchform">
            <input name="vs" type="hidden" value="developer.yahoo.com">
            <input name="vs" type="hidden" value="yuiblog.com">
			<input name="vs" type="hidden" value="yuilibrary.com">
		    <div id="sitesearch">
		    	<label for="searchinput">Site Search (YDN, YUILibrary &amp; YUIBlog): </label>
			    <input type="text" id="searchinput" name="p">
			    <input type="submit" value="Search" id="searchsubmit" class="ygbt">
		    </div>
		</form>
    </div>
	<div id="ygma"><a href="../../"><img src="../../assets/logo.gif"  border="0" width="200" height="93"></a></div>
	<div id="pagetitle"><h1>YUI Library Examples: Overlay: IO Plugin</h1></div>
</div>
<div id="bd">


	<div id="yui-main">
		<div class="yui-b">
		  <div class="yui-ge">
			  <div class="yui-u first example" id="main">

	<h2>Overlay: IO Plugin</h2>

	<div id="example" class="promo">
	<div class="example-intro">
	<p>This example shows how you can use Widget's plugin infrastructure to add additional features to an existing widget.</p>
<p>We create an IO plugin class for <code>Overlay</code> called <code>StdModIOPlugin</code>. The plugin adds IO capabilities to the Overlay, bound to one of its standard module sections <em>(header, body or footer)</em>.</p>
	</div>

	<div class="module example-container ">
			<div class="hd exampleHd">
			<p class="newWindowButton yui-skin-sam">
                <a href="overlay-io-plugin_clean.html" target="_blank">View example in new window.</a>
            </p>
		</div>		<div id="example-canvas" class="bd">

	
	<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->

	<button type="button" id="show">Show Overlay</button>
<button type="button" id="hide">Hide Overlay</button>

<script type="text/javascript">
YUI({ filter: 'raw' }).use("overlay", "substitute", "json", "gallery-widget-io", function(Y) {

    /* Setup local variable for Y.WidgetStdMod, since we use it multiple times */
    var StdMod = Y.WidgetStdMod,
        transportAvailable = false;

    StdModIO = function(config) {
        StdModIO.superclass.constructor.apply(this, arguments);
    };

    Y.extend(StdModIO, Y.Plugin.WidgetIO, {
        initializer: function() {
            Y.on('io:xdrReady', function() {
                transportAvailable = true;
            });
            
            Y.io.transport({
                id:'flash',
                yid: Y.id,
                src:'../../build/io/io.swf?stamp=' + (new Date()).getTime()
            });
        },

        setContent: function(content) {
            var overlay = this.get('host');
            overlay.setStdModContent(this.get('section'), content);
        }

    }, {
        NAME: 'stdModIO',
        NS: 'io',
        ATTRS: {
            section: {
                value:StdMod.BODY,
                validator: function(val) {
                    return (!val || val == StdMod.BODY || val == StdMod.HEADER || val == StdMod.FOOTER);
                }
            }
        }
    });

    /* The Pipes feed URIs to be used to dispatch io transactions */
    var pipes = {

        // uri data
        baseUri : 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run?_id=6b7b2c6a32f5a12e7259c36967052387&_render=json&url=http:/'+'/',
        feeds : {
            ynews : {
                title: 'Yahoo! US News',
                uri: 'rss.news.yahoo.com/rss/us'
            },
            yui : {
                title: 'YUI Blog',
                uri: 'feeds.yuiblog.com/YahooUserInterfaceBlog'
            },
            slashdot : {
                title: 'Slashdot',
                uri: 'rss.slashdot.org/Slashdot/slashdot'
            },
            ajaxian: {
                title: 'Ajaxian',
                uri: 'feeds.feedburner.com/ajaxian'
            },
            daringfireball: {
                title: 'Daring Fireball',
                uri: 'daringfireball.net/index.xml'
            },
            wiredtech: {
                title: 'Wire: Tech Biz',
                uri: 'www.wired.com/rss/techbiz.xml'
            },
            techcrunch: {
                title: 'TechCrunch',
                uri: 'feedproxy.google.com/Techcrunch'
            }
        },

        // The default formatter, responsible for converting the JSON responses recieved,
        // into HTML, using JSON for the parsing step, and substitute for some basic templating functionality
        formatter : function (val) {
            var formatted = "Error parsing feed data";
            try {
                var json = Y.JSON.parse(val);
                if (json && json.count) {
                    var html = ['<ul class="yui3-feed-data">'];
                    var linkTemplate = '<li><a href="{link}" target="_blank">{title}</a></li>';
    
                    Y.each(json.value.items, function(v, i) {
                        if (i < 10) {
                            html.push(Y.substitute(linkTemplate, v));
                        }
                    });
                    html.push("</ul>");
                    formatted = html.join("");
                } else {
                    formatted = "No Data Available";
                }
            } catch(e) {
                formatted = "Error parsing feed data";
            }
            return formatted;
        }
    };

    /* Helper function, to generate the select dropdown markup from the pipes feed data */
    function generateHeaderMarkup() {
        var optTemplate = '<option value="{id}">{title}</option>',
            html = ['<select id="feedSelector" class="yui3-feed-selector"><option value="-1" class="yui3-prompt">Select a Feed...</option>'];

        Y.Object.each(pipes.feeds, function(v, k, o) {
            html.push(Y.substitute(optTemplate, {id:k, title:v.title}));
        });
        html.push('</select>');

        return html.join("");
    }

    /* Create a new Overlay instance, with content generated from script */
    var overlay = new Y.Overlay({
        width:"40em",
        visible:false,
        align: {
            node:"#show",
            points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]
        },
        zIndex:10,
        headerContent: generateHeaderMarkup(),
        bodyContent: "Feed data will be displayed here"
    });

    overlay.render();
    /* 
     * Add the Standard Module IO Plugin, and configure it to use flash, and a formatter specific
     * to the pipes response we're expecting from the uri request we'll send out.
     */
    overlay.plug(StdModIO, {
        uri : pipes.baseUri + pipes.feeds["ynews"].uri,
        cfg:{
            xdr: {
                use:'flash'
            }
        },
        formatter: pipes.formatter,
        loading: '<img class="yui3-loading" width="32px" height="32px" src="assets/img/ajax-loader.gif">'
    });

    Y.on("change", function(e) {
        var val = this.get("value");
        if (transportAvailable) {
            if (val != -1) {
                overlay.io.set("uri", pipes.baseUri + pipes.feeds[val].uri);
                overlay.io.refresh();
            }
        } else {
            overlay.io.setContent("Flash doesn't appear to be available. Cross-domain requests to pipes cannot be made without it.");
        }
    }, "#feedSelector");

    Y.on("click", function(e) {
        overlay.show();
    }, "#show");

    Y.on("click", function(e) {
        overlay.hide();
    }, "#hide");

});
</script>

	<!--END SOURCE CODE FOR EXAMPLE =============================== -->

	
		</div>
	</div>
	</div>

	<h3>Creating an IO Plugin For Overlay</h3>

<h4>Setting Up The YUI Instance</h4>

<p>For this example, we'll start from the Widget IO plugin (gallery-io-plugin) created in the <a href="widget-plugin.html">widget plugin example</a>, pull in <code>overlay</code>; <code>json</code> and <code>substitute</code> utility modules 
and the <code>plugin</code> module. The Widget IO plugin will pull in the dependencies it needs, the main one being <code>io</code> to provide the XHR support. 

The <code>json</code> and <code>substitute</code> modules provide the support we need to parse/transform JSON responses into HTML.The code to set up our sandbox instance is shown below:</p>

<div id="syntax-4b52185481ca81fb5a598d7cab4f8a01" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span>...<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;overlay&quot;</span><span class="sy0">,</span> <span class="st0">&quot;substitute&quot;</span><span class="sy0">,</span> <span class="st0">&quot;json&quot;</span><span class="sy0">,</span> <span class="st0">&quot;gallery-io-plugin&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// We'll write our code here, after pulling in the default Overlay widget, </span></div></li><li class="li1"><div class="de1">    <span class="co1">// the IO utility, the Plugin.WidgetIO base class along with the </span></div></li><li class="li1"><div class="de1">    <span class="co1">// Substitute and JSON utilities</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#123;</span>...<span class="br0">&#125;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">&quot;overlay&quot;</span><span class="sy0">,</span> <span class="st0">&quot;substitute&quot;</span><span class="sy0">,</span> <span class="st0">&quot;json&quot;</span><span class="sy0">,</span> <span class="st0">&quot;gallery-io-plugin&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// We'll write our code here, after pulling in the default Overlay widget, </span>
    <span class="co1">// the IO utility, the Plugin.WidgetIO base class along with the </span>
    <span class="co1">// Substitute and JSON utilities</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-4b52185481ca81fb5a598d7cab4f8a01-plain">YUI({...}).use("overlay", "substitute", "json", "gallery-io-plugin", function(Y) {
    // We'll write our code here, after pulling in the default Overlay widget, 
    // the IO utility, the Plugin.WidgetIO base class along with the 
    // Substitute and JSON utilities
});</textarea></div>
<p>Using the <code>overlay</code> module will also pull down the default CSS required for overlay, on top of which we only need to add our required look/feel CSS for the example.</p>

<h4>StdModIO Class Structure</h4>

<p>The <code>StdModIO</code> class will extend the <code>Plugin.WidgetIO</code> base class.
Since <code>WidgetIO</code> derives from <code>Pluing.Base</code> and hence <code>Base</code>, we follow the same
pattern we use for widgets and other utilities which extend Base to setup our new class.</p>

<p>Namely:</p>

<ul>
    <li>Setting up the default attributes, using the <code>ATTRS</code> property</li>
    <li>Calling the superclass constructor</li>
    <li>Setting up the the <code>NAME</code> property</li>
    <li>Providing prototype implementations for anything we want executed during initialization and destruction using the <code>initializer</code> and <code>destructor</code> lifecycle methods</li>
</ul>

<p>Additionally, since this is a plugin, we provide a <code>NS</code> property for the class, which defines the property which will refer to the <code>StdModIO</code> instance on the host class (e.g. <code>overlay.io</code> will be an instance of <code>StdModIO</code>)</p>.

<div id="syntax-68b7ddf1e7cb3eea288be33cf36dd280" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">StdModIO <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    StdModIO.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">&#40;</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li2"><div class="de2">Y.<span class="me1">extend</span><span class="br0">&#40;</span>StdModIO<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">WidgetIO</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>...<span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    ATTRS<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        section<span class="sy0">:</span> <span class="br0">&#123;</span>...<span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw3">NAME</span><span class="sy0">:</span> <span class="st0">'StdModIO'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    NS<span class="sy0">:</span> <span class="st0">'io'</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">StdModIO <span class="sy0">=</span> <span class="kw2">function</span><span class="br0">&#40;</span>config<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    StdModIO.<span class="me1">superclass</span>.<span class="me1">constructor</span>.<span class="me1">apply</span><span class="br0">&#40;</span><span class="kw1">this</span><span class="sy0">,</span> arguments<span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="sy0">;</span>
&nbsp;
Y.<span class="me1">extend</span><span class="br0">&#40;</span>StdModIO<span class="sy0">,</span> Y.<span class="me1">Plugin</span>.<span class="me1">WidgetIO</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>...<span class="br0">&#125;</span>
&nbsp;
<span class="br0">&#125;</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    ATTRS<span class="sy0">:</span> <span class="br0">&#123;</span>
        section<span class="sy0">:</span> <span class="br0">&#123;</span>...<span class="br0">&#125;</span>
    <span class="br0">&#125;</span>
&nbsp;
<span class="br0">&#125;</span><span class="sy0">,</span> <span class="br0">&#123;</span>
    <span class="kw3">NAME</span><span class="sy0">:</span> <span class="st0">'StdModIO'</span><span class="sy0">,</span>
    NS<span class="sy0">:</span> <span class="st0">'io'</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-68b7ddf1e7cb3eea288be33cf36dd280-plain">StdModIO = function(config) {
    StdModIO.superclass.constructor.apply(this, arguments);
};

Y.extend(StdModIO, Y.Plugin.WidgetIO, {
    initializer: function() {...}

}, {
    ATTRS: {
        section: {...}
    }

}, {
    NAME: 'StdModIO',
    NS: 'io'
});</textarea></div><h4>Plugin Attributes</h4>

<p>The <code>StdModIO</code> is a fairly simple plugin class. It provides
incremental functionality. It does not need to modify the behavior of any
methods on the host Overlay instance, or monitor any Overlay events
(unlike the <a href="overlay-anim-plugin.html">AnimPlugin</a> example).</p>

<p>In terms of code, the attributes for the plugin are set up using the standard
<code>ATTRS</code> property.  For this example, we will add an attribute called
<code>section</code> that represents which part of the module (e.g. "header",
"body", or "footer") will be updated with the returned content.</p>

<div id="syntax-c5960d76371e973cd4a773bad76fa328" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">    <span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;    * The Standard Module section to which the io plugin instance is bound.</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;    * Response data will be used to populate this section, after passing through</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;    * the configured formatter.</span></div></li><li class="li2"><div class="de2"><span class="coMULTI">&nbsp;    */</span></div></li><li class="li1"><div class="de1">    ATTRS<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        section<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            value<span class="sy0">:</span>StdMod.<span class="me1">BODY</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            validator<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>val<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                <span class="kw1">return</span> <span class="br0">&#40;</span><span class="sy0">!</span>val <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">BODY</span> </div></li><li class="li1"><div class="de1">                             <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">HEADER</span> </div></li><li class="li1"><div class="de1">                             <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">FOOTER</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">    <span class="coMULTI">/*
     * The Standard Module section to which the io plugin instance is bound.
     * Response data will be used to populate this section, after passing through
     * the configured formatter.
     */</span>
    ATTRS<span class="sy0">:</span> <span class="br0">&#123;</span>
        section<span class="sy0">:</span> <span class="br0">&#123;</span>
            value<span class="sy0">:</span>StdMod.<span class="me1">BODY</span><span class="sy0">,</span>
            validator<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span>val<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                <span class="kw1">return</span> <span class="br0">&#40;</span><span class="sy0">!</span>val <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">BODY</span> 
                             <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">HEADER</span> 
                             <span class="sy0">||</span> val <span class="sy0">==</span> StdMod.<span class="me1">FOOTER</span><span class="br0">&#41;</span><span class="sy0">;</span>
            <span class="br0">&#125;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="sy0">;</span></pre></div><textarea id="syntax-c5960d76371e973cd4a773bad76fa328-plain">    /*
     * The Standard Module section to which the io plugin instance is bound.
     * Response data will be used to populate this section, after passing through
     * the configured formatter.
     */
    ATTRS: {
        section: {
            value:StdMod.BODY,
            validator: function(val) {
                return (!val || val == StdMod.BODY 
                             || val == StdMod.HEADER 
                             || val == StdMod.FOOTER);
            }
        }
    }
};</textarea></div>
<h4>Lifecycle Methods: initializer, destructor</h4>

<p>The base <code>WidgetIO</code> plugin implements the <code>initializer</code>
and <code>destructor</code> lifecycle methods.  For the purposes of this example,
we will extend the <code>StdModIO</code> plugin's <code>initializer</code> so that it
activates the Flash based <a href="../../io/#xdr">XDR</a> transport so that the
plugin is able to dispatch both in-domain and cross-domain requests
(the transport used for any particular uri is controlled through the plugin's
<code>cfg</code> attribute).</p>

<div id="syntax-71346e5d6f7302076b25f5d7b943aca5" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="co1">// We setup a flag, so that we know if </span></div></li><li class="li1"><div class="de1">    <span class="co1">// flash is available to make the </span></div></li><li class="li1"><div class="de1">    <span class="co1">// XDR request.</span></div></li><li class="li2"><div class="de2">    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'io:xdrReady'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        transportAvailable <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    Y.<span class="me1">io</span>.<span class="me1">transport</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        id<span class="sy0">:</span><span class="st0">'flash'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        yid<span class="sy0">:</span> Y.<span class="me1">id</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        src<span class="sy0">:</span><span class="st0">'../../build/io/io.swf?stamp='</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="kw2">new</span> Date<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>.<span class="me1">getTime</span><span class="br0">&#40;</span><span class="br0">&#41;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">initializer<span class="sy0">:</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// We setup a flag, so that we know if </span>
    <span class="co1">// flash is available to make the </span>
    <span class="co1">// XDR request.</span>
    Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">'io:xdrReady'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        transportAvailable <span class="sy0">=</span> <span class="kw2">true</span><span class="sy0">;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
    Y.<span class="me1">io</span>.<span class="me1">transport</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
        id<span class="sy0">:</span><span class="st0">'flash'</span><span class="sy0">,</span>
        yid<span class="sy0">:</span> Y.<span class="me1">id</span><span class="sy0">,</span>
        src<span class="sy0">:</span><span class="st0">'../../build/io/io.swf?stamp='</span> <span class="sy0">+</span> <span class="br0">&#40;</span><span class="kw2">new</span> Date<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#41;</span>.<span class="me1">getTime</span><span class="br0">&#40;</span><span class="br0">&#41;</span>
    <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-71346e5d6f7302076b25f5d7b943aca5-plain">initializer: function() {
    // We setup a flag, so that we know if 
    // flash is available to make the 
    // XDR request.
    Y.on('io:xdrReady', function() {
        transportAvailable = true;
    });

    Y.io.transport({
        id:'flash',
        yid: Y.id,
        src:'../../build/io/io.swf?stamp=' + (new Date()).getTime()
    });
}</textarea></div>
<h4>Using the Plugin</h4>

<p>All objects derived from <a href="../../api/Base.html">Base</a> are <a href="../../api/Plugin.Host.html">Plugin Hosts</a>. They provide <a href="../../api/Plugin.Host.html#method_plug"><code>plug</code></a> and <a href="../../api/Plugin.Host.html#method_unplug"><code>unplug</code></a> methods to allow users to add/remove plugins to/from existing instances. 
They also allow the user to specify the set of plugins to be applied to a new instance, along with their configurations, as part of the constructor arguments.</p>

<p>In this example, we'll create a new instance of an Overlay:</p>

<div id="syntax-6c73a7a70d138040facd987e6bd7d2aa" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Create a new Overlay instance, with content generated from script */</span></div></li><li class="li1"><div class="de1"><span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">&#40;</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    width<span class="sy0">:</span><span class="st0">&quot;40em&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    visible<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    align<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        node<span class="sy0">:</span><span class="st0">&quot;#show&quot;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        points<span class="sy0">:</span> <span class="br0">&#91;</span>Y.<span class="me1">WidgetPositionAlign</span>.<span class="me1">TL</span><span class="sy0">,</span> Y.<span class="me1">WidgetPositionAlign</span>.<span class="me1">BL</span><span class="br0">&#93;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    zIndex<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">    headerContent<span class="sy0">:</span> generateHeaderMarkup<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    bodyContent<span class="sy0">:</span> <span class="st0">&quot;Feed data will be displayed here&quot;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* Create a new Overlay instance, with content generated from script */</span>
<span class="kw2">var</span> overlay <span class="sy0">=</span> <span class="kw2">new</span> Y.<span class="me1">Overlay</span><span class="br0">&#40;</span><span class="br0">&#123;</span>
    width<span class="sy0">:</span><span class="st0">&quot;40em&quot;</span><span class="sy0">,</span>
    visible<span class="sy0">:</span><span class="kw2">false</span><span class="sy0">,</span>
    align<span class="sy0">:</span> <span class="br0">&#123;</span>
        node<span class="sy0">:</span><span class="st0">&quot;#show&quot;</span><span class="sy0">,</span>
        points<span class="sy0">:</span> <span class="br0">&#91;</span>Y.<span class="me1">WidgetPositionAlign</span>.<span class="me1">TL</span><span class="sy0">,</span> Y.<span class="me1">WidgetPositionAlign</span>.<span class="me1">BL</span><span class="br0">&#93;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
    zIndex<span class="sy0">:</span><span class="nu0">10</span><span class="sy0">,</span>
    headerContent<span class="sy0">:</span> generateHeaderMarkup<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">,</span>
    bodyContent<span class="sy0">:</span> <span class="st0">&quot;Feed data will be displayed here&quot;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-6c73a7a70d138040facd987e6bd7d2aa-plain">/* Create a new Overlay instance, with content generated from script */
var overlay = new Y.Overlay({
    width:"40em",
    visible:false,
    align: {
        node:"#show",
        points: [Y.WidgetPositionAlign.TL, Y.WidgetPositionAlign.BL]
    },
    zIndex:10,
    headerContent: generateHeaderMarkup(),
    bodyContent: "Feed data will be displayed here"
});</textarea></div>
<p>And then use the <code>plug</code> method to add the <code>StdModIO</code>, providing it with a configuration to use when sending out io transactions (The <a href="overlay-anim-plugin.html">Animation Plugin</a> example shows how you could do the same thing during construction):</p>

<div id="syntax-d13079c7d16f115f16b2b20c89650d7a" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/*</span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;* Add the Standard Module IO Plugin, and configure it to use flash, </span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;* and a formatter specific to the pipes response we're expecting </span></div></li><li class="li1"><div class="de1"><span class="coMULTI">&nbsp;* from the uri request we'll send out.</span></div></li><li class="li2"><div class="de2"><span class="coMULTI">&nbsp;*/</span></div></li><li class="li1"><div class="de1">overlay.<span class="me1">plug</span><span class="br0">&#40;</span>StdModIO<span class="sy0">,</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    uri <span class="sy0">:</span> pipes.<span class="me1">baseUri</span> <span class="sy0">+</span> pipes.<span class="me1">feeds</span><span class="br0">&#91;</span><span class="st0">&quot;ynews&quot;</span><span class="br0">&#93;</span>.<span class="me1">uri</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    cfg<span class="sy0">:</span><span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        xdr<span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">            <span class="kw2">use</span><span class="sy0">:</span><span class="st0">'flash'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    formatter<span class="sy0">:</span> pipes.<span class="me1">formatter</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    loading<span class="sy0">:</span> <span class="st0">'&lt;img class=&quot;yui3-loading&quot; width=&quot;32px&quot; height=&quot;32px&quot; src=&quot;assets/img/ajax-loader.gif&quot;&gt;'</span></div></li><li class="li2"><div class="de2"><span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/*
 * Add the Standard Module IO Plugin, and configure it to use flash, 
 * and a formatter specific to the pipes response we're expecting 
 * from the uri request we'll send out.
 */</span>
overlay.<span class="me1">plug</span><span class="br0">&#40;</span>StdModIO<span class="sy0">,</span> <span class="br0">&#123;</span>
    uri <span class="sy0">:</span> pipes.<span class="me1">baseUri</span> <span class="sy0">+</span> pipes.<span class="me1">feeds</span><span class="br0">&#91;</span><span class="st0">&quot;ynews&quot;</span><span class="br0">&#93;</span>.<span class="me1">uri</span><span class="sy0">,</span>
    cfg<span class="sy0">:</span><span class="br0">&#123;</span>
        xdr<span class="sy0">:</span> <span class="br0">&#123;</span>
            <span class="kw2">use</span><span class="sy0">:</span><span class="st0">'flash'</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span><span class="sy0">,</span>
    formatter<span class="sy0">:</span> pipes.<span class="me1">formatter</span><span class="sy0">,</span>
    loading<span class="sy0">:</span> <span class="st0">'&lt;img class=&quot;yui3-loading&quot; width=&quot;32px&quot; height=&quot;32px&quot; src=&quot;assets/img/ajax-loader.gif&quot;&gt;'</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-d13079c7d16f115f16b2b20c89650d7a-plain">/*
 * Add the Standard Module IO Plugin, and configure it to use flash, 
 * and a formatter specific to the pipes response we're expecting 
 * from the uri request we'll send out.
 */
overlay.plug(StdModIO, {
    uri : pipes.baseUri + pipes.feeds["ynews"].uri,
    cfg:{
        xdr: {
            use:'flash'
        }
    },
    formatter: pipes.formatter,
    loading: '<img class="yui3-loading" width="32px" height="32px" src="assets/img/ajax-loader.gif">'
});</textarea></div>
<p>For this example, the io plugin is configured to use the <code>flash</code> cross-domain transport, to send out requests to the pipes API for the feed the user selects from the dropdown.</p>

<h4>Getting Feed Data Through Pipes</h4>

<p>We setup an object (<code>pipes</code>) to hold the feed URIs, which can be looked up and passed to the plugin to dispatch requests for new data:</p>

<div id="syntax-6d89082bf17daff912c51619daf97d37" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* The Pipes feed URIs to be used to dispatch io transactions */</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="kw2">var</span> pipes <span class="sy0">=</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    baseUri <span class="sy0">:</span> <span class="st0">'http:/'</span><span class="sy0">+</span><span class="st0">'/pipes.yahooapis.com/pipes/pipe.run? <span class="es0">\</span></span></div></li><li class="li2"><div class="de2"><span class="st0">               _id=6b7b2c6a32f5a12e7259c36967052387&amp; <span class="es0">\</span></span></div></li><li class="li1"><div class="de1"><span class="st0">               _render=json&amp;url=http:/'</span><span class="sy0">+</span><span class="st0">'/'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">    feeds <span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        ynews <span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            title<span class="sy0">:</span> <span class="st0">'Yahoo! US News'</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">            uri<span class="sy0">:</span> <span class="st0">'rss.news.yahoo.com/rss/us'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        yui <span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            title<span class="sy0">:</span> <span class="st0">'YUI Blog'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            uri<span class="sy0">:</span> <span class="st0">'feeds.yuiblog.com/YahooUserInterfaceBlog'</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">        slashdot <span class="sy0">:</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            title<span class="sy0">:</span> <span class="st0">'Slashdot'</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">            uri<span class="sy0">:</span> <span class="st0">'rss.slashdot.org/Slashdot/slashdot'</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li2"><div class="de2">        ...</div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span><span class="sy0">,</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">    ...</div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* The Pipes feed URIs to be used to dispatch io transactions */</span>
&nbsp;
<span class="kw2">var</span> pipes <span class="sy0">=</span> <span class="br0">&#123;</span>
    baseUri <span class="sy0">:</span> <span class="st0">'http:/'</span><span class="sy0">+</span><span class="st0">'/pipes.yahooapis.com/pipes/pipe.run? <span class="es0">\</span>
               _id=6b7b2c6a32f5a12e7259c36967052387&amp; <span class="es0">\</span>
               _render=json&amp;url=http:/'</span><span class="sy0">+</span><span class="st0">'/'</span><span class="sy0">,</span>
    feeds <span class="sy0">:</span> <span class="br0">&#123;</span>
        ynews <span class="sy0">:</span> <span class="br0">&#123;</span>
            title<span class="sy0">:</span> <span class="st0">'Yahoo! US News'</span><span class="sy0">,</span>
            uri<span class="sy0">:</span> <span class="st0">'rss.news.yahoo.com/rss/us'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        yui <span class="sy0">:</span> <span class="br0">&#123;</span>
            title<span class="sy0">:</span> <span class="st0">'YUI Blog'</span><span class="sy0">,</span>
            uri<span class="sy0">:</span> <span class="st0">'feeds.yuiblog.com/YahooUserInterfaceBlog'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        slashdot <span class="sy0">:</span> <span class="br0">&#123;</span>
            title<span class="sy0">:</span> <span class="st0">'Slashdot'</span><span class="sy0">,</span>
            uri<span class="sy0">:</span> <span class="st0">'rss.slashdot.org/Slashdot/slashdot'</span>
        <span class="br0">&#125;</span><span class="sy0">,</span>
        ...
    <span class="br0">&#125;</span><span class="sy0">,</span>
&nbsp;
    ...</pre></div><textarea id="syntax-6d89082bf17daff912c51619daf97d37-plain">/* The Pipes feed URIs to be used to dispatch io transactions */

var pipes = {
    baseUri : 'http:/'+'/pipes.yahooapis.com/pipes/pipe.run? \
               _id=6b7b2c6a32f5a12e7259c36967052387& \
               _render=json&url=http:/'+'/',
    feeds : {
        ynews : {
            title: 'Yahoo! US News',
            uri: 'rss.news.yahoo.com/rss/us'
        },
        yui : {
            title: 'YUI Blog',
            uri: 'feeds.yuiblog.com/YahooUserInterfaceBlog'
        },
        slashdot : {
            title: 'Slashdot',
            uri: 'rss.slashdot.org/Slashdot/slashdot'
        },
        ...
    },

    ...</textarea></div>
<p>The data structure also holds the default formatter (<code>pipes.formatter</code>) required to convert the JSON responses from the above URIs to HTML. The JSON utility is first used to parse the json response string. The resulting object is iterated around, using Y.each, and substitute is used to generate the list markup:</p>

<div id="syntax-83fc586b99779d0f7143443f9e43d3b1" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1">...</div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1"><span class="co1">// The default formatter, responsible for converting the JSON responses received,</span></div></li><li class="li1"><div class="de1"><span class="co1">// into HTML. JSON is used for the parsing step, and substitute for some basic </span></div></li><li class="li2"><div class="de2"><span class="co1">// templating functionality</span></div></li><li class="li1"><div class="de1">&nbsp;</div></li><li class="li1"><div class="de1">formatter <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>val<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> formatted <span class="sy0">=</span> <span class="st0">&quot;Error parsing feed data&quot;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">try</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw2">var</span> json <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">&#40;</span>val<span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="kw1">if</span> <span class="br0">&#40;</span>json <span class="sy0">&amp;&amp;</span> json.<span class="me1">count</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            <span class="kw2">var</span> html <span class="sy0">=</span> <span class="br0">&#91;</span><span class="st0">'&lt;ul class=&quot;yui3-feed-data&quot;&gt;'</span><span class="br0">&#93;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            <span class="kw2">var</span> linkTemplate <span class="sy0">=</span> </div></li><li class="li1"><div class="de1">                <span class="st0">'&lt;li&gt;&lt;a href=&quot;{link}&quot; target=&quot;_blank&quot;&gt;{title}&lt;/a&gt;&lt;/li&gt;'</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">&nbsp;</div></li><li class="li1"><div class="de1">            <span class="co1">// Loop around all the items returned, and feed </span></div></li><li class="li1"><div class="de1">            <span class="co1">// them into the template above, using substitute.</span></div></li><li class="li1"><div class="de1">            Y.<span class="me1">each</span><span class="br0">&#40;</span>json.<span class="me1">value</span>.<span class="me1">items</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> i<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">                <span class="kw1">if</span> <span class="br0">&#40;</span>i <span class="sy0">&lt;</span> <span class="nu0">10</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">                    html.<span class="me1">push</span><span class="br0">&#40;</span>Y.<span class="me1">substitute</span><span class="br0">&#40;</span>linkTemplate<span class="sy0">,</span> v<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">                <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">            <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            html.<span class="me1">push</span><span class="br0">&#40;</span><span class="st0">&quot;&lt;/ul&gt;&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            formatted <span class="sy0">=</span> html.<span class="me1">join</span><span class="br0">&#40;</span><span class="st0">&quot;&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            formatted <span class="sy0">=</span> <span class="st0">&quot;No Data Available&quot;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span> <span class="kw1">catch</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">        formatted <span class="sy0">=</span> <span class="st0">&quot;Error parsing feed data&quot;</span><span class="sy0">;</span></div></li><li class="li2"><div class="de2">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">return</span> formatted<span class="sy0">;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;">...
&nbsp;
<span class="co1">// The default formatter, responsible for converting the JSON responses received,</span>
<span class="co1">// into HTML. JSON is used for the parsing step, and substitute for some basic </span>
<span class="co1">// templating functionality</span>
&nbsp;
formatter <span class="sy0">:</span> <span class="kw2">function</span> <span class="br0">&#40;</span>val<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> formatted <span class="sy0">=</span> <span class="st0">&quot;Error parsing feed data&quot;</span><span class="sy0">;</span>
    <span class="kw1">try</span> <span class="br0">&#123;</span>
        <span class="kw2">var</span> json <span class="sy0">=</span> Y.<span class="me1">JSON</span>.<span class="me1">parse</span><span class="br0">&#40;</span>val<span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>json <span class="sy0">&amp;&amp;</span> json.<span class="me1">count</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            <span class="kw2">var</span> html <span class="sy0">=</span> <span class="br0">&#91;</span><span class="st0">'&lt;ul class=&quot;yui3-feed-data&quot;&gt;'</span><span class="br0">&#93;</span><span class="sy0">;</span>
            <span class="kw2">var</span> linkTemplate <span class="sy0">=</span> 
                <span class="st0">'&lt;li&gt;&lt;a href=&quot;{link}&quot; target=&quot;_blank&quot;&gt;{title}&lt;/a&gt;&lt;/li&gt;'</span><span class="sy0">;</span>
&nbsp;
            <span class="co1">// Loop around all the items returned, and feed </span>
            <span class="co1">// them into the template above, using substitute.</span>
            Y.<span class="me1">each</span><span class="br0">&#40;</span>json.<span class="me1">value</span>.<span class="me1">items</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>v<span class="sy0">,</span> i<span class="br0">&#41;</span> <span class="br0">&#123;</span>
                <span class="kw1">if</span> <span class="br0">&#40;</span>i <span class="sy0">&lt;</span> <span class="nu0">10</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
                    html.<span class="me1">push</span><span class="br0">&#40;</span>Y.<span class="me1">substitute</span><span class="br0">&#40;</span>linkTemplate<span class="sy0">,</span> v<span class="br0">&#41;</span><span class="br0">&#41;</span><span class="sy0">;</span>
                <span class="br0">&#125;</span>
            <span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
            html.<span class="me1">push</span><span class="br0">&#40;</span><span class="st0">&quot;&lt;/ul&gt;&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
            formatted <span class="sy0">=</span> html.<span class="me1">join</span><span class="br0">&#40;</span><span class="st0">&quot;&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
            formatted <span class="sy0">=</span> <span class="st0">&quot;No Data Available&quot;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span> <span class="kw1">catch</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        formatted <span class="sy0">=</span> <span class="st0">&quot;Error parsing feed data&quot;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
    <span class="kw1">return</span> formatted<span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div><textarea id="syntax-83fc586b99779d0f7143443f9e43d3b1-plain">...

// The default formatter, responsible for converting the JSON responses received,
// into HTML. JSON is used for the parsing step, and substitute for some basic 
// templating functionality

formatter : function (val) {
    var formatted = "Error parsing feed data";
    try {
        var json = Y.JSON.parse(val);
        if (json && json.count) {
            var html = ['<ul class="yui3-feed-data">'];
            var linkTemplate = 
                '<li><a href="{link}" target="_blank">{title}</a></li>';

            // Loop around all the items returned, and feed 
            // them into the template above, using substitute.
            Y.each(json.value.items, function(v, i) {
                if (i < 10) {
                    html.push(Y.substitute(linkTemplate, v));
                }
            });
            html.push("</ul>");
            formatted = html.join("");
        } else {
            formatted = "No Data Available";
        }
    } catch(e) {
        formatted = "Error parsing feed data";
    }
    return formatted;
}</textarea></div>
<p>The <code>change</code> handler for the select dropdown binds everything together, taking the currently selected feed, constructing the URI for the feed, setting it on the plugin, and sending out the request:</p>

<div id="syntax-8253bdcae93fcd2f1f7acc07dc5da4fd" class="yui-syntax-highlight"><div class="numbers"><pre class="javascript" style="font-family:monospace;"><ol><li class="li1"><div class="de1"><span class="coMULTI">/* Handle select change */</span></div></li><li class="li1"><div class="de1">Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;change&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">    <span class="kw2">var</span> val <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;value&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="kw1">if</span> <span class="br0">&#40;</span>transportAvailable<span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        <span class="kw1">if</span> <span class="br0">&#40;</span>val <span class="sy0">!=</span> <span class="sy0">-</span><span class="nu0">1</span><span class="br0">&#41;</span> <span class="br0">&#123;</span></div></li><li class="li1"><div class="de1">            overlay.<span class="me1">io</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;uri&quot;</span><span class="sy0">,</span> pipes.<span class="me1">baseUri</span> <span class="sy0">+</span> pipes.<span class="me1">feeds</span><span class="br0">&#91;</span>val<span class="br0">&#93;</span>.<span class="me1">uri</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">            overlay.<span class="me1">io</span>.<span class="me1">refresh</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">        <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span></div></li><li class="li2"><div class="de2">        overlay.<span class="me1">io</span>.<span class="me1">setContent</span><span class="br0">&#40;</span><span class="st0">&quot;Flash doesn't appear to be available. Cross-domain requests to pipes cannot be made without it.&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li><li class="li1"><div class="de1">    <span class="br0">&#125;</span></div></li><li class="li1"><div class="de1"><span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;#feedSelector&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></div></li></ol></pre></div><div class="nonumbers"><pre class="javascript" style="font-family:monospace;"><span class="coMULTI">/* Handle select change */</span>
Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;change&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>e<span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw2">var</span> val <span class="sy0">=</span> <span class="kw1">this</span>.<span class="me1">get</span><span class="br0">&#40;</span><span class="st0">&quot;value&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="kw1">if</span> <span class="br0">&#40;</span>transportAvailable<span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="kw1">if</span> <span class="br0">&#40;</span>val <span class="sy0">!=</span> <span class="sy0">-</span><span class="nu0">1</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
            overlay.<span class="me1">io</span>.<span class="me1">set</span><span class="br0">&#40;</span><span class="st0">&quot;uri&quot;</span><span class="sy0">,</span> pipes.<span class="me1">baseUri</span> <span class="sy0">+</span> pipes.<span class="me1">feeds</span><span class="br0">&#91;</span>val<span class="br0">&#93;</span>.<span class="me1">uri</span><span class="br0">&#41;</span><span class="sy0">;</span>
            overlay.<span class="me1">io</span>.<span class="me1">refresh</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
        <span class="br0">&#125;</span>
    <span class="br0">&#125;</span> <span class="kw1">else</span> <span class="br0">&#123;</span>
        overlay.<span class="me1">io</span>.<span class="me1">setContent</span><span class="br0">&#40;</span><span class="st0">&quot;Flash doesn't appear to be available. Cross-domain requests to pipes cannot be made without it.&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
<span class="br0">&#125;</span><span class="sy0">,</span> <span class="st0">&quot;#feedSelector&quot;</span><span class="br0">&#41;</span><span class="sy0">;</span></pre></div><textarea id="syntax-8253bdcae93fcd2f1f7acc07dc5da4fd-plain">/* Handle select change */
Y.on("change", function(e) {
    var val = this.get("value");
    if (transportAvailable) {
        if (val != -1) {
            overlay.io.set("uri", pipes.baseUri + pipes.feeds[val].uri);
            overlay.io.refresh();
        }
    } else {
        overlay.io.setContent("Flash doesn't appear to be available. Cross-domain requests to pipes cannot be made without it.");
    }
}, "#feedSelector");</textarea></div>				</div>
				<div class="yui-u sidebar">
	
					<div id="examples" class="mod box4">
                        <div class="hd">
						<h4>
    Overlay Examples:</h4>
                        </div>
						<div class="bd">
							<ul>
								<li><a href='../overlay/overlay-xy.html'>Basic XY Positioning</a></li><li><a href='../overlay/overlay-align.html'>Alignment Support</a></li><li><a href='../overlay/overlay-stack.html'>Stack Support</a></li><li><a href='../overlay/overlay-stdmod.html'>Standard Module Support</a></li><li><a href='../overlay/overlay-constrain.html'>Constrain Support</a></li><li class='selected'><a href='../overlay/overlay-io-plugin.html'>IO Plugin</a></li><li><a href='../overlay/overlay-anim-plugin.html'>Animation Plugin</a></li><li><a href='../node-focusmanager/node-focusmanager-3.html'>Accessible Menu Button (included with examples for Focus Manager Node Plugin)</a></li><li><a href='../stylesheet/stylesheet_theme.html'>Adjusting a Page Theme on the Fly (included with examples for StyleSheet)</a></li>							</ul>
						</div>
					</div>

					<div class="mod box4">
                        <div class="hd">
						<h4>More Overlay Resources:</h4>
                        </div>
                        <div class="bd">
						<ul>
							<!-- <li><a href="http://developer.yahoo.com/yui/overlay/">User's Guide</a> (external)</li> -->
<li><a href="../../api/module_overlay.html">API Documentation</a></li></ul>
                        </div>
					</div>
			  </div>
		</div>

		</div>
	</div>


<div class="yui-b toc3" id="tocWrapper">
<!-- TABLE OF CONTENTS -->
<div id="toc">
	
<ul>
<li class="sect first">YUI 3 Resources</li><li class="item"><a title="YUI 3 -- Yahoo! User Interface (YUI) Library" href="http://developer.yahoo.com/yui/3/">YUI 3 Web Site</a></li><li class="item"><a title="Examples of every YUI utility and control in action" href="../../examples/">YUI 3 Examples</a></li><li class="item"><a title="Instantly searchable API documentation for the entire YUI library." href="../../api/">YUI 3 API Docs</a></li><li class="item"><a title="YUI 3 Dependency Configurator -- configure your custom YUI implementation" href="http://developer.yahoo.com/yui/3/configurator/index.html">YUI 3 Dependency Configurator</a></li><li class="item"><a title="The YUI 3 Forum on YUILibrary.com" href="http://yuilibrary.com/forum/viewforum.php?f=15">YUI 3 Forums (external)</a></li><li class="item"><a title="Found a bug or a missing feature? Let us know on YUILibrary.com." href="http://developer.yahoo.com/yui/articles/reportingbugs/">Bug Reports/Feature Requests</a></li><li class="item"><a title="YUI is free and open, offered under a BSD license." href="http://developer.yahoo.com/yui/license.html">YUI License</a></li><li class="item"><a title="Download and fork the YUI project on GitHub" href="http://github.com/yui">YUI on Github</a></li><li class="item"><a title="The Yahoo! User Interface Blog" href="http://yuiblog.com">YUI Blog (external)</a></li><li class="sect">YUI 3 Core - Examples</li><li class="item"><a title="YUI Global Object - Functional Examples" href="../../examples/yui/index.html">YUI Global Object</a></li><li class="item"><a title="Event - Functional Examples" href="../../examples/event/index.html">Event</a></li><li class="item"><a title="Node - Functional Examples" href="../../examples/node/index.html">Node</a></li><li class="sect">YUI 3 Component Infrastructure - Examples</li><li class="item"><a title="Attribute - Functional Examples" href="../../examples/attribute/index.html">Attribute</a></li><li class="item"><a title="Plugin - Functional Examples" href="../../examples/plugin/index.html">Plugin</a></li><li class="item"><a title="Widget - Functional Examples" href="../../examples/widget/index.html">Widget</a></li><li class="sect">YUI 3 Utilities - Examples</li><li class="item"><a title="Animation - Functional Examples" href="../../examples/anim/index.html">Animation</a></li><li class="item"><a title="AsyncQueue - Functional Examples" href="../../examples/async-queue/index.html">AsyncQueue</a></li><li class="item"><a title="Cache - Functional Examples" href="../../examples/cache/index.html">Cache</a></li><li class="item"><a title="Cookie - Functional Examples" href="../../examples/cookie/index.html">Cookie</a></li><li class="item"><a title="DataSchema - Functional Examples" href="../../examples/dataschema/index.html">DataSchema <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataSource - Functional Examples" href="../../examples/datasource/index.html">DataSource <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataType - Functional Examples" href="../../examples/datatype/index.html">DataType <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Drag &amp; Drop - Functional Examples" href="../../examples/dd/index.html">Drag &amp; Drop</a></li><li class="item"><a title="Get - Functional Examples" href="../../examples/get/index.html">Get</a></li><li class="item"><a title="History - Functional Examples" href="../../examples/history/index.html">History <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="IO - Functional Examples" href="../../examples/io/index.html">IO</a></li><li class="item"><a title="ImageLoader - Functional Examples" href="../../examples/imageloader/index.html">ImageLoader</a></li><li class="item"><a title="Internationalization - Functional Examples" href="../../examples/intl/index.html">Internationalization</a></li><li class="item"><a title="JSON (JavaScript Object Notation) - Functional Examples" href="../../examples/json/index.html">JSON</a></li><li class="item"><a title="JSONP (JSON with Padding) - Functional Examples" href="../../examples/jsonp/index.html">JSONP <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Recordset - Functional Examples" href="../../examples/recordset/index.html">Recordset <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Resize - Functional Examples" href="../../examples/resize/index.html">Resize <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Sortable - Functional Examples" href="../../examples/sortable/index.html">Sortable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Stylesheet - Functional Examples" href="../../examples/stylesheet/index.html">Stylesheet</a></li><li class="item"><a title="Transition - Functional Examples" href="../../examples/transition/index.html">Transition <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Uploader - Functional Examples" href="../../examples/uploader/index.html">Uploader <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YQL Query - Functional Examples" href="../../examples/yql/index.html">YQL Query <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Widgets - Examples</li><li class="item"><a title="AutoComplete - Functional Examples" href="../../examples/autocomplete/index.html">AutoComplete <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Charts - Functional Examples" href="../../examples/charts/index.html">Charts <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="DataTable - Functional Examples" href="../../examples/datatable/index.html">DataTable <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Dial - Functional Examples" href="../../examples/dial/index.html">Dial <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Editor - Functional Examples" href="../../examples/editor/index.html">Editor <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="selected "><a title="Overlay - Functional Examples" href="../../examples/overlay/index.html">Overlay <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="ScrollView - Functional Examples" href="../../examples/scrollview/index.html">ScrollView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Slider - Functional Examples" href="../../examples/slider/index.html">Slider <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="TabView - Functional Examples" href="../../examples/tabview/index.html">TabView <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 Node Plugins - Examples</li><li class="item"><a title="FocusManager Node Plugin - Functional Examples" href="../../examples/node-focusmanager/index.html">FocusManager Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="MenuNav Node Plugin - Functional Examples" href="../../examples/node-menunav/index.html">MenuNav Node Plugin <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="sect">YUI 3 CSS - Examples</li><li class="item"><a title="YUI Base - Functional Examples" href="../../examples/cssbase/index.html">CSS Base</a></li><li class="item"><a title="YUI Fonts - Functional Examples" href="../../examples/cssfonts/index.html">CSS Fonts</a></li><li class="item"><a title="YUI Grids - Functional Examples" href="../../examples/cssgrids/index.html">CSS Grids <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="YUI CSS Reset - Functional Examples" href="../../examples/cssreset/index.html">CSS Reset</a></li><li class="sect">YUI 3 Developer Tools - Examples</li><li class="item"><a title="Console - Functional Examples" href="../../examples/console/index.html">Console <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Console Filters Plugin- Functional Examples" href="../../examples/console-filters/index.html">Plugin.ConsoleFilters <img alt='beta' src='http://l.yimg.com/a/i/not/beta_1.gif'></a></li><li class="item"><a title="Profiler - Functional Examples" href="../../examples/profiler/index.html">Profiler</a></li><li class="item"><a title="Test - Functional Examples" href="../../examples/test/index.html">Test</a></li><li class="sect">Other Useful YUI 3 Resources</li><li class="item"><a title="Answers to Frequently Asked Questions about the YUI Library" href="http://developer.yahoo.com/yui/articles/faq/">YUI FAQ (external)</a></li><li class="item"><a title="Yahoo!'s philosophy of Graded Browser Support" href="http://developer.yahoo.com/yui/articles/gbs/">Graded Browser Support (external)</a></li><li class="item"><a title="Videos and podcasts from the YUI Team and from the Yahoo! frontend engineering community." href="http://developer.yahoo.com/yui/theater/">YUI Theater (external)</a></li></ul>
</div>
</div>
	</div><!--closes bd-->

	<div id="ft">
        <p class="first">Copyright &copy; 2011 Yahoo! Inc. All rights reserved.</p>
        <p><a href="http://privacy.yahoo.com/privacy/us/devel/index.html">Privacy Policy</a> - 
            <a href="http://docs.yahoo.com/info/terms/">Terms of Service</a> - 
            <a href="http://docs.yahoo.com/info/copyright/copyright.html">Copyright Policy</a> - 
            <a href="http://careers.yahoo.com/">Job Openings</a></p>
	</div>
</div>
<script language="javascript"> 
var yuiConfig = { filter: 'raw' };
</script>
<script src="../../assets/syntax.js"></script>
<script src="../../assets/dpSyntaxHighlighter.js"></script>
<script language="javascript"> 
dp.SyntaxHighlighter.HighlightAll('code'); 
</script>
</body>
</html>
